<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
             * {
                margin: 0; padding: 0;
            }
            html,body {
                    width: 100%; height: 100%;
            }
            body {
                position: relative;
                /* width: 100%; height: 753px; */
                /* overflow: hidden; */
            }
            #tou {
                width: 100%;
                height: 50px;
                background-color: bisque;
                position: relative;
                z-index: 1;
            }
            #tou>span {
                color: blueviolet;
                font: 25px/50px "楷体";

            }
            #tou>span:nth-child(1) {
                float: left;
            }
            #tou>span:nth-child(2) {
                float: right;
            }
            #tank {
                width: 200px; height: 200px;
                border: burlywood 2px solid;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -102px;
                margin-top: -102px;
            }
            #tank>h2 {
                margin-top: 10px;
                text-align: center;
                color: blueviolet;
                font: 25px/50px "楷体";
            }
            #tank>h3 {
                margin-top: 20px;
                text-align: center;
                color: rgb(212, 136, 196);
                font: 20px/50px "楷体";
            }
            #tank>a {
                display: block;
                margin: 0 auto;
                text-align: center;
                color: rgb(240, 27, 27);
                font: 18px/50px "楷体";
                
            }
            #tutao {
                width: 100%;
                height: 70px;
                position: absolute;
                bottom: 0;
                background-color: cadetblue;
            }
            #tutao>img {
                display: block;
                width: 70px;
            }
        </style>
    </head>
    <body>
        <div id="tou"><span>时间剩余:</span><span></span></div>
        <div id="tank" >
            <h2>游戏结束</h2>
            <h3>得分：</h3>
            <a>开始游戏</a>
        </div>
        <div id="tutao"><img src="./img/wsc.jpg" alt="" style="position: absolute; bottom: 0; left: 0;"></div>
        




        <script>
            var btn = document.body.querySelector('a')
            console.log(btn)
            
                // e = evt || window.event;
                var wsc = document.querySelector('#tutao img')
                var tao = document.querySelector('#tutao') 
                tao.onmousemove = function(evt) {
                    var e = evt || window.event;
                    sbwz = e.clientX
                    var target = e.target || e.srcElement;
                    // if (target.nodeName == 'IMG'){
                        // target.style.pointerEvents = 'none'
                        wsc.style.left = e.clientX-35+'px'
                    // }
                    
                }
            
            function random(min,max) {
                return Math.floor(Math.random()*(max-min+1)+min)
                 
            }
            var score = 0
            var shijian = 30
            btn.onclick = function(evt) {
                //弹框消失
                document.querySelector('#tank').style.display = 'none'
                //定时器造面包
                var timerxx = setInterval(function(){
                    var imgObj = document.createElement('img')
                    let who = random(0,9)
                    if([6,8].includes(who)){
                        imgObj.src = './img/guanjun.jpg'
                        imgObj.className = 'food guanjun'
                    }else {
                        imgObj.src = './img/hotdog.jpg'
                        imgObj.className = 'food hotdog'
                    }
                    imgObj.width = 50;
                    imgObj.style.position = 'absolute'
                    document.body.appendChild(imgObj)
                    let max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth

                    imgObj.style.left = random(0,max)+'px'
                    imgObj.style.top = 50+'px'


                    //时间减少
                    shijian--
                    document.querySelector('#tou>span:nth-child(1)').innerHTML = '时间剩余：'+shijian+'s'
                    if(shijian<=0){
                        clearInterval(timerxx)
                        clearInterval(timer)
                        document.querySelector('#tank').style.display = 'block'
                    } 
                    
                },1000)
                //定时器控制面包下落
                
                timer = setInterval(function(){
                        var imgAll = document.querySelectorAll('.food')
                        // console.log(imgAll)
                        // var aaatop = 50;
                        imgAll.forEach(function(item,index) {
                            let top = parseInt(item.style.top) + 2
                            let maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
                            // aaatop+=5
                            // item.style.top = aaatop+'px'
                            let wscsbwz = parseInt(wsc.style.left)

                            if(top>=maxTop){
                                document.body.removeChild(item)
                                // return
                            }else {
                                item.style.top = top + 'px'
                            }
                            
                            // 3. 食物掉落判断是否在王公子范围内
                            //    公式x：  食物x > 王公子x  && 食物x < 王公子x+自身宽度
                            //    公式y：  食物y+自身高度 > 王公子y 
                            //    符 合：【公式x、公式y】则分数+1
                            let foodX = parseInt(item.style.left)
                            let foodY = parseInt(item.style.top) + item.offsetHeight
                            let wscY = parseInt(wsc.style.top)
                            let chazhi = wscsbwz - foodX
                            if ( 
                                (chazhi<=25 && chazhi>=-25)
                                &&
                                foodY>690 
                            ) {
                                if(item.className == 'food guanjun'){
                                    document.querySelector('#tou>span:nth-child(2)').innerHTML = '+5'
                                    score+=5
                                }else{
                                    score++
                                    document.querySelector('#tou>span:nth-child(2)').innerHTML = '+1'
                                }
                                
                                // console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX+wscObj.offsetWidth},${wscY+wscObj.offsetHeight}】，+1，总分【${score}}】`);
                                // document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
                                document.body.removeChild(item)
                                
                                document.querySelector('#tank>h3').innerHTML = '得分：'+score
                            }
                            
                        })
                        
                        
                        
                        // var aaleft = parseInt(imgObj.style.left)
                        // console.log(aaleft)
                        // var sbbfb = parseInt((sbwz/document.documentElement.clientWidth)*100)
                        // console.log(sbbfb)
                        
                        // if(aatop>=700 && (chazhi>=-5 || chazhi<=5)) { //吃到了你就几分数
                        //     // document.body.removeChild(imgObj)
                        // }
                },10)
            }
            
        </script>
    </body>
</html>